Ext.namespace('myApp.viewComponents.contactIndex');//specific namespace for the components of THIS view

//declaration of the components used on this view
myApp.viewComponents.contactIndex.detailToolbar = new Ext.Toolbar({
    items:[
        {
            text:'back',
            ui:'back',
            handler:function(){
                myApp.viewport.layout.activeItem.setActiveItem('listwrapper',{type:'slide',direction:'right'});
            }
        }
    ]
});
myApp.viewComponents.contactIndex.listToolbar = new Ext.Toolbar({
    title:'Tophe Contacts ...',
    items:[
        {
            text:'Sommaire',
            ui:'back',
            handler:function(){
                Ext.dispatch({
                    controller: "Index",
                    action:'index',
                    animation: { type: 'slide', direction: 'right' }
                })
            }
        }
    ]
});
myApp.viewComponents.contactIndex.listPanel = new Ext.List({
    id:'indexList',
    store: myApp.ListStore,
    grouped:true,
    onItemDisclosure:function(record){
        var name = record.data.firstName+' '+record.data.lastName;
        myApp.viewComponents.contactIndex.detailPanel.update(record.data);
        myApp.viewComponents.contactIndex.detailToolbar.setTitle(name);
        myApp.viewport.layout.activeItem.setActiveItem('detailpanel');
    },
    itemTpl: '<div>{firstName} <strong>{lastName}</strong></div>'
});
myApp.viewComponents.contactIndex.detailPanel = new Ext.Panel({
    id:'detailpanel',
    tpl:'Hello {firstName} !',
    dockedItems:[
        myApp.viewComponents.contactIndex.detailToolbar
    ]
});
myApp.viewComponents.contactIndex.listWrapper = new Ext.Panel({
    id:'listwrapper',
    layout:'fit',
    items:[myApp.viewComponents.contactIndex.listPanel],
    dockedItems:[
//        {
//            xtype:'toolbar',
//            title:'Tophe Contacts ...'
//        }
        myApp.viewComponents.contactIndex.listToolbar
    ]
});


myApp.views.contactIndex = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout:'card',
    cardSwitchAnimation:'slide',
    items:[
        myApp.viewComponents.contactIndex.listWrapper,myApp.viewComponents.contactIndex.detailPanel
    ],
    initComponent:function(){
        myApp.views.contactIndex.superclass.initComponent.apply(this,arguments);
    }
});
Ext.reg('contactIndex', myApp.views.contactIndex);